<template>
  <div>
      <h1>登陆页面</h1>
      <div id="form1">
        <el-form :model="roleForm" ref="ruleForm">
        <el-form-item label="用户名">
          <el-input type="text" v-model="users.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="users.password"></el-input>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="login">登陆</el-button>
        <el-button type="primary" @click="resetForm">重置</el-button>
        </el-form-item>
        </el-form>
      </div>
  </div>

</template>

<script>
import {mapMutations, MapStates, MapActions, mapActions, mapState} from "vuex";
export default {
  data(){
    return{
      users:{},
      roleForm:{},
    }
  },

  computed:{
    ...mapState("user",["user"]),
   
  },

  methods:{
     ...mapMutations("user",["setUser"]),


    async login(){
      var userLog = await this.ajax.getSubmit("/api/users/login",this.users);
      if(userLog != null){
        this.setUser(userLog);
        this.$router.push({path:"/mainpage",query:{userLogin:userLog}});
      } else {
        alert("登陆失败");
      }
    },

    resetForm(formName){
      this.user={};
    },


    
  }
}
</script>

<style>
  #form1{
    align-items: center;
  }
</style>